<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-animations-2/#animation-shorthand">
<link rel="help" href="https://drafts.csswg.org/css-animations-2/#animation-timeline">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/computed-testcommon.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
<script src="/css/support/shorthand-testcommon.js"></script>
<div id="target"></div>
<script>
test_valid_value('animation',
  '1s linear 1s 2 reverse forwards paused anim');

test_invalid_value('animation',
  '1s linear 1s 2 reverse forwards paused anim initial');
test_invalid_value('animation',
  '1s linear 1s 2 reverse forwards paused anim 2000');
test_invalid_value('animation',
  '1s linear 1s 2 reverse forwards paused anim scroll()');
test_invalid_value('animation',
  '1s linear 1s 2 reverse forwards paused anim view()');
test_invalid_value('animation',
  '1s linear 1s 2 reverse forwards paused anim --timeline');

test_computed_value('animation',
  '1s linear 1s 2 reverse forwards paused anim');

test_shorthand_value('animation',
  `1s linear 1s 2 reverse forwards paused anim1,
   1s linear 1s 2 reverse forwards paused anim2,
   1s linear 1s 2 reverse forwards paused anim3`,
{
  'animation-duration': '1s, 1s, 1s',
  'animation-timing-function': 'linear, linear, linear',
  'animation-delay': '1s, 1s, 1s',
  'animation-iteration-count': '2, 2, 2',
  'animation-direction': 'reverse, reverse, reverse',
  'animation-fill-mode': 'forwards, forwards, forwards',
  'animation-play-state': 'paused, paused, paused',
  'animation-name': 'anim1, anim2, anim3',
  'animation-timeline': 'auto',
  'animation-range-start': 'normal',
  'animation-range-end': 'normal',
});

test((t) => {
  t.add_cleanup(() => {
    target.style = '';
  });

  target.style.animation = 'anim 1s';
  target.style.animationTimeline = '--timeline';
  assert_equals(target.style.animation, '');
  assert_equals(target.style.animationName, 'anim');
  assert_equals(target.style.animationDuration, '1s');

  target.style.animationTimeline = 'auto, auto';
  assert_equals(target.style.animation, '');
}, 'Animation shorthand can not represent non-initial timelines (specified)');

test((t) => {
  t.add_cleanup(() => {
    target.style = '';
  });

  target.style.animation = 'anim 1s';
  target.style.animationTimeline = '--timeline';
  assert_equals(getComputedStyle(target).animation, '');
  assert_equals(getComputedStyle(target).animationName, 'anim');
  assert_equals(getComputedStyle(target).animationDuration, '1s');

  target.style.animationTimeline = 'auto, auto';
  assert_equals(getComputedStyle(target).animation, '');
}, 'Animation shorthand can not represent non-initial timelines (computed)');

test((t) => {
  t.add_cleanup(() => {
    target.style = '';
  });

  target.style.animation = 'anim 1s';
  target.style.animationRangeStart = 'entry';
  assert_equals(target.style.animation, '');
  assert_equals(target.style.animationName, 'anim');
  assert_equals(target.style.animationDuration, '1s');

  target.style.animationRangeStart = 'normal, normal';
  assert_equals(target.style.animation, '');
}, 'Animation shorthand can not represent non-initial animation-range-start (specified)');

test((t) => {
  t.add_cleanup(() => {
    target.style = '';
  });

  target.style.animation = 'anim 1s';
  target.style.animationRangeStart = 'entry';
  assert_equals(getComputedStyle(target).animation, '');
  assert_equals(getComputedStyle(target).animationName, 'anim');
  assert_equals(getComputedStyle(target).animationDuration, '1s');

  target.style.animationRangeStart = 'normal, normal';
  assert_equals(getComputedStyle(target).animation, '');
}, 'Animation shorthand can not represent non-initial animation-range-start (computed)');

test((t) => {
  t.add_cleanup(() => {
    target.style = '';
  });

  target.style.animation = 'anim 1s';
  target.style.animationRangeEnd = 'entry';
  assert_equals(target.style.animation, '');
  assert_equals(target.style.animationName, 'anim');
  assert_equals(target.style.animationDuration, '1s');

  target.style.animationRangeEnd = 'normal, normal';
  assert_equals(target.style.animation, '');
}, 'Animation shorthand can not represent non-initial animation-range-end (specified)');

test((t) => {
  t.add_cleanup(() => {
    target.style = '';
  });

  target.style.animation = 'anim 1s';
  target.style.animationRangeEnd = 'entry';
  assert_equals(getComputedStyle(target).animation, '');
  assert_equals(getComputedStyle(target).animationName, 'anim');
  assert_equals(getComputedStyle(target).animationDuration, '1s');

  target.style.animationRangeEnd = 'normal, normal';
  assert_equals(getComputedStyle(target).animation, '');
}, 'Animation shorthand can not represent non-initial animation-range-end (computed)');

test((t) => {
  t.add_cleanup(() => {
    target.style = '';
  });

  target.style.animationName = "bounce, roll";
  target.style.animationDuration = "1s, 0.2s";
  target.style.animationTimingFunction = "ease-in, linear";
  target.style.animationDelay = "0s, 1s";
  target.style.animationDirection = "normal, reverse";
  target.style.animationFillMode = "forwards, backwards";
  target.style.animationIterationCount = "infinite, 2";
  target.style.animationPlayState = "paused, running";
  // animation-timeline and animation-range-{start|end} are initial values.
  assert_equals(target.style.animation, '');
}, 'Animation shorthand can not be represented with same list length (specified)');

test((t) => {
  t.add_cleanup(() => {
    target.style = '';
  });

  target.style.animationName = "bounce, roll";
  target.style.animationDuration = "1s, 0.2s";
  target.style.animationTimingFunction = "ease-in, linear";
  target.style.animationDelay = "0s, 1s";
  target.style.animationDirection = "normal, reverse";
  target.style.animationFillMode = "forwards, backwards";
  target.style.animationIterationCount = "infinite, 2";
  target.style.animationPlayState = "paused, running";
  // animation-timeline and animation-range-{start|end} are initial values.
  assert_equals(getComputedStyle(target).animation,
      '1s ease-in infinite forwards paused bounce, ' +
      '0.2s linear 1s 2 reverse backwards roll');
}, 'Animation shorthand can be represented with same list length (computed)');

</script>
